<template>
  <div>
    <div class="mystudy">
      <div class="info">
        <div class="tou">
          <img :src="$store.state.user.userimg" alt="" />
        </div>
        <div class="name">
          <p>{{ $store.state.user.username }}</p>
          <span>{{ $store.state.user.userinfo }}</span>
        </div>
      </div>
      <ul>
        <li><router-link to="/collect">我的收藏</router-link></li>
        <li>我的订阅</li>
        <li>我的下载</li>
      </ul>
    </div>
    <div class="now">
      <h3>
        <span>在学课程</span
        ><a href="javascript:;">查看全部<i class="el-icon-arrow-right"></i></a>
      </h3>
      <div class="nowitem" v-for="(item,i) in now" :key="i">
        <div class="txt">{{item.title}}</div>
        <div class="classimg"><img :src="item.img" alt=""></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder } from "../api/order";
export default {
  data() {
    return {
      now: [],
    };
  },
  mounted() {
    getOrder(this.$store.state.user.userid).then((res) => {
      let newarr = [];
      res.data.forEach((ele) => {
        newarr = newarr.concat(ele.shoplist);
      });
    let obj = {};
    for (var i = 0; i < newarr.length; i++) {
      if (!obj[newarr[i].id]) {
        this.now.push(newarr[i]);
        obj[newarr[i].id] = true;
      }
    }
    });
  },
};
</script>

<style scoped>
.mystudy {
  background-color: #ffffff;
  margin-bottom: 0.2rem;
}
.info {
  height: 1.32rem;
  padding: 0.4rem;
  display: flex;
}
.name {
  margin-left: 0.2rem;
  width: 4.44rem;
}
.name p {
  font-size: 0.36rem;
  line-height: 0.78rem;
}
.name span {
  font-size: 0.26rem;
  color: #a6a6a6;
}
.mystudy img {
  width: 1.32rem;
  height: 1.32rem;
  border-radius: 50%;
}
ul {
  height: 1.12rem;
  line-height: 1.12rem;
  font-size: 0.28rem;
  text-align: center;
  display: flex;
}
ul li {
  flex: 1;
}
.now {
  background-color: #ffffff;
}
h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1rem;
  padding: 0 0.3rem;
  font-size: 0.3rem;
}
h3 a {
  counter-reset: #a6a6a6;
  font-weight: normal;
  font-size: 0.28rem;
}
.nowitem {
  padding: 0.4rem 0.3rem;
  display: flex;
  justify-content: space-between;
}
.classimg {
  width: 2.62rem;
  height: 1.4rem;
}
.txt {
  flex: 1;
  font-size: 0.3rem;
}
.classimg img {
  width: 100%;
  height: 100%;
}
</style>
